<template>
  <div id="panel2" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
    <div id='pie_chart' style="height: 90vh"></div>
  </div>
</template>

<script>

import echarts from 'echarts'
export default {
  name: 'panel2',
  data() {
    return {}
  },
  methods: {
    initPieChart() {
      const piePatternSrc =
        '';
      const piePatternImg = new Image();
      piePatternImg.src = piePatternSrc;

      let _self = this
      var chartDom = document.getElementById('pie_chart');
      var myChart = echarts.init(chartDom);

      // 美化一下下面的饼状图样式
      let option = {
        tooltip: {},
        dataset: {
          source: [
            ['tag', '1', '2', '3', '4', '5', '6'],
            ['接入量', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
            ['使用量', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7]
          ]
        },
        title: [
          {text: '云', left: '20%', top: '10%', textAlign: 'center', textStyle: {color: '#FFFFFF', fontSize: 18}},
          {text: '边', left: '50%', top: '10%', textAlign: 'center', textStyle: {color: '#FFFFFF', fontSize: 18}},
          {text: '端', left: '80%', top: '10%', textAlign: 'center', textStyle: {color: '#FFFFFF', fontSize: 18}},
          {
            text: '存储资源',
            left: '5%',
            top: '30%',
            textAlign: 'center',
            textVerticalAlign: 'middle',
            textStyle: {color: '#FFFFFF', fontSize: 18}
          },
          {
            text: '计算资源',
            left: '5%',
            top: '65%',
            textAlign: 'center',
            textVerticalAlign: 'middle',
            textStyle: {color: '#FFFFFF', fontSize: 18}
          }
        ],
        series: [
          {
            type: 'pie',
            radius: '22%',
            center: ['20%', '30%'],
            encode: {itemName: 'tag', value: '1'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          },
          {
            type: 'pie',
            radius: '22%',
            center: ['50%', '30%'],
            encode: {itemName: 'tag', value: '2'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          },
          {
            type: 'pie',
            radius: '22%',
            center: ['80%', '30%'],
            encode: {itemName: 'tag', value: '3'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          },
          {
            type: 'pie',
            radius: '22%',
            center: ['20%', '65%'],
            encode: {itemName: 'tag', value: '4'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          },
          {
            type: 'pie',
            radius: '22%',
            center: ['50%', '65%'],
            encode: {itemName: 'tag', value: '5'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          },
          {
            type: 'pie',
            radius: '22%',
            center: ['80%', '65%'],
            encode: {itemName: 'tag', value: '6'},
            itemStyle: {
              opacity: 0.7,
              color: {
                image: piePatternImg,
                repeat: 'repeat'
              },
              borderWidth: 3,
              borderColor: '#235894'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: '#FFFFFF'
            }
          }
        ]
      };

      myChart.setOption(option);
      // 为饼状图的每个扇区添加点击事件
    }
  },
  mounted() {
    this.initPieChart()
  }
}
</script>

<style lang="scss">
.class1 {
  height: 46vh;

  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;

  // border-width: 2px; /* 设置边框粗细 */
  // border-style: solid; /* 设置边框样式 */
  // border-color: red;

  color: red;
  font-size: 30px;
}

.table_box {

  .el-table {
    background-color: rgba(38, 38, 38, 0);
    border-radius: 3px;
    border-color: white;
  }

  .el-table tr {
    background-color: transparent;
    color: white;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  .el-table th {
    background-color: rgba(150, 150, 150, 0.26) !important;
    font-size: 11pt;
  }

  .el-table th .cell {
    color: #ffffff;
    font-size: 11pt;
    height: 19px
  }

  .el-table td {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 11pt;
  }

  .el-table--enable-row-hover .el-table__body tr:hover td {
    background-color: rgba(38, 38, 38, 0.5) !important;
    color: white !important;
  }

}

</style>
